<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8" />
	    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
		<title>农夫三拳_主界面</title>
		<link rel="stylesheet" href="../static/css/app.css" />
		<script src="../static/js/echarts.min.js"></script>
    	<script src="../static/js/china.js"></script>
	</head>
	
	<body>
		<div class="header">
			<h1 class="header-title">农夫三拳_主界面</h1>
		</div>
		<div class="wrapper">
			<div class="content">
				<div class="col col-l">
					<div class="xpanel-wrapper xpanel-wrapper-40">
						<div class="xpanel xpanel-l-t" id="bintu">
							<div class="title">今日关注</div>
							
						</div>
					</div>
					<div class="xpanel-wrapper xpanel-wrapper-60">
						<div class="xpanel-wrapper xpanel-wrapper-25">
							<div class="xpanel xpanel-r-t" style="height: 200px;" id="zhutu2">
								<div class="title" > 111</div>
							</div>
						</div>
						<div class="xpanel-wrapper xpanel-wrapper-30" style="margin-top: 100px;height: 200px;">
							<div class="xpanel xpanel-r-m" >
								<div class="title">222</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col col-c">
					<div class="xpanel-wrapper xpanel-wrapper-75">
						<div class="xpanel no-bg" id="main">
						</div>
					</div>
					<div class="xpanel-wrapper xpanel-wrapper-25">
						<div class="xpanel xpanel-c-b" id="zhutu">
							<div class="title title-long">价格行情</div>
						</div>
					</div>
				</div>
				<div class="col col-r">
					<div class="xpanel-wrapper xpanel-wrapper-25">
						<div class="xpanel xpanel-r-t" id="huantu">
							<div class="title">行情走势</div>
						</div>
					</div>
					<div class="xpanel-wrapper xpanel-wrapper-30">
						<div class="xpanel xpanel-r-m" id="zhutu3">
							<div class="title">最新资讯</div>
						</div>
					</div>
					<div class="xpanel-wrapper xpanel-wrapper-45">
						<div class="xpanel xpanel-r-b" id="tiaotu">
							<div class="title">条形图</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		
	<script>
		var dataList=[
					{name:"南海诸岛",value:0},
					{name: '北京', value: randomValue()},
					{name: '天津', value: randomValue()},
					{name: '上海', value: randomValue()},
					{name: '重庆', value: randomValue()},
					{name: '河北', value: randomValue()},
					{name: '河南', value: randomValue()},
					{name: '云南', value: randomValue()},
					{name: '辽宁', value: randomValue()},
					{name: '黑龙江', value: randomValue()},
					{name: '湖南', value: randomValue()},
					{name: '安徽', value: randomValue()},
					{name: '山东', value: randomValue()},
					{name: '新疆', value: randomValue()},
					{name: '江苏', value: randomValue()},
					{name: '浙江', value: randomValue()},
					{name: '江西', value: randomValue()},
					{name: '湖北', value: randomValue()},
					{name: '广西', value: randomValue()},
					{name: '甘肃', value: randomValue()},
					{name: '山西', value: randomValue()},
					{name: '内蒙古', value: randomValue()},
					{name: '陕西', value: randomValue()},
					{name: '吉林', value: randomValue()},
					{name: '福建', value: randomValue()},
					{name: '贵州', value: randomValue()},
					{name: '广东', value: randomValue()},
					{name: '青海', value: randomValue()},
					{name: '西藏', value: randomValue()},
					{name: '四川', value: randomValue()},
					{name: '宁夏', value: randomValue()},
					{name: '海南', value: randomValue()},
					{name: '台湾', value: randomValue()},
					{name: '香港', value: randomValue()},
					{name: '澳门', value: randomValue()}
				]
        var myChart = echarts.init(document.getElementById('main'));
        function randomValue() {
            return Math.round(Math.random()*1000);
        }
        option = {
            tooltip: {
                    formatter:function(params,ticket, callback){
                        return params.seriesName+'<br />'+params.name+'：'+params.value
                    }//数据格式化
                },
            visualMap: {
                min: 0,
                max: 1500,
                left: 'top',
                top: 'bottom',
                text: ['高','低'],//取值范围的文字
                inRange: {
                    color: ['red', '#006edd']//取值范围的颜色
                },
				textStyle: {
					color: "red"
					},
                show:true//图注
            },
            geo: {
                map: 'china',
                roam: false,//不开启缩放和平移
                zoom:1.23,//视角缩放比例
                label: {
                    normal: {
                        show: true,
                        fontSize:'10',
                        color: 'rgba(0,0,0,0.7)'
                    }
                },
                itemStyle: {
                    normal:{
                        borderColor: 'rgba(0, 0, 0, 0.2)'
                    },
                    emphasis:{
                        areaColor: '#F3B329',//鼠标选择区域颜色
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        borderWidth: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            },
            series : [
                {
                    name: '信息量',
                    type: 'map',
                    geoIndex: 0,
                    data:dataList
                }
            ]
        };
        myChart.setOption(option);
        myChart.on('click', function (params) {
            alert(params.name);
        });
 
      /*  setTimeout(function () {
            myChart.setOption({
                series : [
                    {
                        name: '信息量',
                        type: 'map',
                        geoIndex: 0,
                        data:dataList
                    }
                ]
            });
        },1000)*/

		function huantu(){
			var myChart = echarts.init(document.getElementById('huantu'));
			option = {
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b}: {c} ({d}%)'
				},
				legend: {
					orient: 'vertical',
					left: 10,
					data: ['畜产品', '水产品', '粮油', '果品', '蔬菜'],
					inactiveColor: "rgba(6, 163, 40, 1)",
					textStyle: {
								color: "rgba(34, 139, 184, 1)"
								}
				},
				series: [
					{
						name: '批发市场类型',
						type: 'pie',
						radius: ['50%', '70%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '30',
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						data: [
							{value: 310, name: '畜产品'},
							{value: 234, name: '水产品'},
							{value: 135, name: '粮油'},
							{value: 1548, name: '果品'},
							{value: 1548, name: '蔬菜'}
						]
					}
				]
			};
			myChart.setOption(option);
			myChart.on('click', function (params) {
				alert(params.name);
			});
		}

		function tiaotu(){
			var myChart = echarts.init(document.getElementById('tiaotu'));
			option = {
				title: {
					text: '最新产品报价',
					subtext: '数据来自网络'
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
				legend: {
					data: ['2020、6', '2020、7'],
					textStyle: {
								color: "rgba(34, 139, 184, 1)"
								}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: {
					type: 'value',
					boundaryGap: [0, 0.01]
				},
				yAxis: {
					type: 'category',
					data: ['猪肉', '鸡蛋', '黄瓜', '大白菜', '菠萝', '土豆'],
					axisLabel: {
							color: "rgba(34, 139, 184, 1)"
							},
				},
				series: [
					{
						name: '2020、6',
						type: 'bar',
						data: [25, 1, 2, 1, 3, 1.2]
					},
					{
						name: '2020、7',
						type: 'bar',
						data: [30, 1.2, 2.3, 1.2, 3.5, 1.2]
					}
				]
			};
			myChart.setOption(option);
			myChart.on('click', function (params) {
				alert(params.name);
			});

		}
		
		function bintu(){
			var myChart = echarts.init(document.getElementById('bintu'));
			option = {
				title: {
					text: '市场类型占比',
					// subtext: '纯属虚构',
					left: 'center'
				},
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b} : {c} ({d}%)'
				},
				legend: {
					orient: 'vertical',
					left: 'left',
					data: ['产地', '销地']
				},
				series: [
					{
						name: '访问来源',
						type: 'pie',
						radius: '55%',
						center: ['50%', '60%'],
						data: [
							{value: 48, name: '产地'},
							{value: 68, name: '销地'},
						],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			};
			myChart.setOption(option);
		}

		function zhutu(){
			var myChart = echarts.init(document.getElementById('zhutu'));
			option = {
    title: {
        text: '折线图堆叠'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['土豆', '西红柿', '大白菜']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['2020/1', '2020/3', '2020/5', ]
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '土豆',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101]
        },
        {
            name: '西红柿',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191]
        },
        {
            name: '大白菜',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201]
        },
    ]
};

			myChart.setOption(option);
		}

		function zhutu2(){
			var myChart = echarts.init(document.getElementById('zhutu2'));
			option = {
    color: ['#3398DB'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','s'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '直接访问',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220,200]
        }
    ]
};
myChart.setOption(option);
		}

		function zhutu3(){
			var myChart = echarts.init(document.getElementById('zhutu3'));
			option = {
    title: {
        text: '某地区蒸发量和降水量',
        subtext: '纯属虚构'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['蒸发量', '降水量']
    },
    toolbox: {
        show: true,
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    calculable: true,
    xAxis: [
        {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '蒸发量',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        },
        {
            name: '降水量',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
            markPoint: {
                data: [
                    {name: '年最高', value: 182.2, xAxis: 7, yAxis: 183},
                    {name: '年最低', value: 2.3, xAxis: 11, yAxis: 3}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        }
    ]
};

			myChart.setOption(option);
		}
		huantu();
		tiaotu();
		bintu()
		zhutu()
		zhutu2()
		zhutu3()
		// var; ceshi = {{ceshi|safe }}
        // console.log(ceshi)
	</script>

	</body>

</html>